<!--代码根据作业要求和仿照教材图片而写-->
<!--样式参考教材图片效果，表单宽度与窗口宽度同步，概要结构为#app>form>table-->
<!--通常表单内容来自数据库，后端以键值对的形式将数据库表传递给前端，说明购物车已经存在，添加功能不需要出现在这个页面-->
<!--点击商品名称预览商品，使用v-bind设置要显示的图片地址，使用v-for批量构建img标签，使用v-show判断图片是否应该被显示，在商品名的标签通过@click设置显示逻辑-->
<!--使用v-for遍历生成th和表单中各行信息，每行前面遍历生成的序号是临时数据，跟信息条无关-->
<!--购买数量为0时不移除条目，防止意外操作，也保留为记录，需使用删除键移除条目-->
<!--ini用于初始化排序，v-if执行一次排序后删除执行排序的dom-->
<!--除了vue.js需要根据自己项目更改位置外，其他url或者资源都不需要更改-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>购物车</title>
	<script src="js/vue.js"></script>
	<style>
		*{margin: 0;padding: 0}/*不同的浏览器默认margin和padding不同，统一归零以兼容*/
		#app table{
			width: 100vw;
		}
		#app td{
			width: calc(100% / 6);
		}
		.add{
			background: #757575;
			width: 20%
		}
		.remove{
			background: #aaa;
			width: 20%
		}
		#app .del:hover, .opr:hover, #paid:hover{
			background: #858585;
			color: #ffffff;
		}
		tr:nth-child(even) td{
			background: #ddd;
		}
		tr:nth-child(odd) td{
			background: #ccc;
		}
		.buyAndOpr div, #paid{
			text-align: center;
		}
		#paid{
			background: #c2c2c2;
			width: 100%;
		}
		.opr, .operations{
			user-select: none;
		}
	</style>
</head>
<body>
<div id="app">
	<form action="" v-show="tbody.length>0">
		<div class="operations" style="display: flex;justify-content: center;">
			排序方式:&nbsp;
			<label>
				<input v-model="indexType" value="0" type="radio" class="opr" name="index">
			名称&nbsp;</label>
			<label>
				<input v-model="indexType" value="1" type="radio" class="opr" name="index">
			单价&nbsp;</label>
			<label>
				<input v-model="indexType" value="2" type="radio" class="opr" name="index">
			购买数量&nbsp;</label>
			<label>
				<input v-model="indexType" value="3" type="radio" class="opr" name="index">
			总价&nbsp;</label>
			<label>
				<input v-model="orderType[0]" value="true" type="checkbox" class="opr" name="order">
			逆序&nbsp;</label>
			<label>
				<input @click="sortF" value="刷新排序" type="button" class="opr" name="order">
			</label>&nbsp;
			<label>
				搜索商品名:<input type="text" v-model="searchFor" placeholder="区分大小写" size="10%">
			</label>
		</div>
		<table style="border-style: solid;border-width: 1px">
			<thead>
			<tr>
				<th v-for="i in thead" v-html="i"></th>
			</tr>
			</thead>
			<tbody>
			<tr v-for="(i,key) in tbody" v-show="i.name.includes(searchFor)">
				<td>{{key+1}}</td>
				<td class="opr">
					<div @click="pngF(key)">{{i.name}}</div>
				</td>
				<td>{{i.price}}</td>
				<td>
					<div class="buyAndOpr" style="display: inline-flex;
					  	width: 100%;height: 20px;">
						<div class="remove opr" @click="removeF(key)">-</div>
						<div style="width: 60%">{{i.num}}</div>
					  <div class="add opr" @click="addF(key)">+</div>
					</div>
				</td>
				<td>{{i.price*i.num}}</td>
				<td style="background: #6b6b6b;text-align: center">
					<div class="del opr" @click="delF(key)" style="width: 100%;" title="删除">🗑</div>
				</td>
			</tr>
			<tr>
				<td colspan="4"></td>
				<td>{{sumF()}}</td>
				<td>
					<button id="paid" class="opr">提交订单</button>
				</td>
			</tr>
			</tbody>
		</table>
		<div style="display: grid;place-items: center">
		<img class="goods" style="width: 500px;"
		    v-for="i in tbody" :src="i.href" alt="无网络或网站的图片不见了"
				 v-show="i.visibleOfPng">
		</div>
	</form>
	<div style="display: grid;place-items: center" v-show="tbody.length===0" >
		<img :src="emptyForPng" alt="无网络或网站的图片不见了">
		<h3>购物车空空如也</h3>
	</div>
	<div v-if="!ini">{{sortF()}}</div>
</div>
<script>
	new Vue({
		el: '#app',
		data:{
			ini:false,
			emptyForPng:'https://tse1-mm.cn.bing.net/th/id/OIP-C.TXVvY5NPBXNCJESzrBdhLQAAAA?pid=ImgDet&rs=1',
			thead:{
				id:'',
				head1: '商品名称',
				head2: '商品单价',
				head3: '购买数量',
				head4: '总价',
				head5: '操作',
			},
			tbody:[
				{
					href: 'https://cbu01.alicdn.com/img/ibank/2018/942/073/9486370249_1570409590.jpg',
					name: 'Apple',
					price: 10,
					num:0,
					stock:999,
					visibleOfPng: false,
				},
				{
					href: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.6XnpcVGFqyx2O66jOGK-4QHaE7?pid=ImgDet&rs=1',
					name: 'Orange',
					price: 5,
					num:0,
					stock:999,
					visibleOfPng: false,
				},
				{
					href: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.6enDzNPbUZ-ntj67a60BQQHaE8?pid=ImgDet&rs=1',
					name: 'Banana',
					price: 20,
					num:0,
					stock:999,
					visibleOfPng: false,
				},
			],
			totalPaid:0,
			searchFor:'',
			indexType:"0",
			orderType:[false],
		},
		methods:{
			removeF(line){
				if(this.tbody[line].num>0) {
						this.tbody[line].num--
				}
			},
			addF(line){
				if(this.tbody[line].num <
					  this.tbody[line].stock) {
					this.tbody[line].num++
				}
			},
			delF(line){
				this.$delete(this.tbody,line)
			},
			sumF(){
				var sum = 0
				for (var i in this.tbody){
					sum += this.tbody[i].price*this.tbody[i].num
				}
				return this.totalPaid = '¥'+sum
			},
			pngF(line){
				for (var i in this.tbody){
					if (this.tbody[i].visibleOfPng && i !== line)
						this.tbody[i].visibleOfPng = false
				}
				this.tbody[line].visibleOfPng = true
			},
			sortF(){
				if(!this.orderType[0]) {
					switch (this.indexType) {
						case "0":
							this.tbody.sort((a, b) => a.name.localeCompare(b.name));
							break
						case "1":
							this.tbody.sort((a, b) => a.price - b.price);
							break
						case "2":
							this.tbody.sort((a, b) => a.num - b.num);
							break
						case "3":
							this.tbody.sort((a, b) => a.num * a.price - b.num * b.price);
							break
						default:
							break
					}
				}else {
					switch (this.indexType) {
						case "0":
							this.tbody.sort((a, b) => b.name.localeCompare(a.name));
							break
						case "1":
							this.tbody.sort((a, b) => b.price - a.price);
							break
						case "2":
							this.tbody.sort((a, b) => b.num - a.num);
							break
						case "3":
							this.tbody.sort((a, b) => b.num * b.price - a.num * a.price);
							break
						default:
							break
					}
				}
				return this.ini = true
			}
		},
		watch:{
			indexType(){
				this.sortF()
			}
		}
	})
</script>
</body>
</html>